<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/commons/global.jsp" %>
<script type="text/javascript">
    var syslogDataGrid;
    $(function () {
        syslogDataGrid=$('#sysLogDataGrid').datagrid({
            url: '${path }/sysLog/dataGrid',
            striped: true,
            pagination: true,
            singleSelect: true,
            idField: 'id',
            pageSize: 20,
            pageList: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
            columns: [[{
                width: '80',
                title: '登录名',
                field: 'loginName',
                sortable: true
            }, {
                width: '80',
                title: '用户名',
                field: 'roleName'
            }, {
                width: '100',
                title: 'IP地址',
                field: 'clientIp',
                sortable: true
            }, {
                width: '800',
                title: '内容',
                field: 'optContent'
            }, {
                width: '130',
                title: '创建时间',
                field: 'createTime'
            }]]
        });
    });
</script>
<style>
    ul,li{
        list-style-type:none}
    .tab_box{
        padding:10px 0;
        position: relative;
    }
    .tab_box th{
        white-space: nowrap;
    }
    .list{float: left;
        padding-left: 130px;
        position: relative;
        margin: 0px;}
    .list li{
        float: left;margin:0 0 5px 13px;
    }
    .tab_a{position: absolute;left: 0px;top:11px; z-index: 99;}
    .lay_box{height: auto !important ;}
</style>
<script>
    /**
     * 清除
     */
    function syslogCleanFun() {
        $('#syslogForm input').val('');
        syslogDataGrid.datagrid('load', {});
    }
    /**
     * 查询
     */
    function syslogSearchFun() {
        syslogDataGrid.datagrid('load', $.serializeObject($('#syslogForm')));
    }
</script>
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'north',border:false" class="lay_box" style="height: 30px; overflow: hidden;background-color: #fff">
        <form id="syslogForm">
            <div class="tab_box">
                <div class="tab_a">
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'fi-magnifying-glass',plain:true" onclick="syslogSearchFun();">查询</a>
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'fi-x-circle',plain:true" onclick="syslogCleanFun();">清空</a>
                </div>
                <ul class="list">
                    <li>
                        <label>登录名:</label>
                        <input name="loginName" type="text" placeholder="请输入值" class="easyui-textbox" data-options="height:29,width:180"/>
                    </li>
                    <li>
                        <label>IP:</label>
                        <input name="clientIp" type="text" placeholder="请输入值" class="easyui-textbox" data-options="height:29,width:180"/>
                    </li>
                    <li>
                        <label>内容:</label>
                        <input name="optContent" type="text" placeholder="请输入值" class="easyui-textbox" data-options="height:29,width:300"/>
                    </li>

                </ul>
            </div>
        </form>
    </div>
    <div data-options="region:'center',border:false">
        <table id="sysLogDataGrid" data-options="fit:true,border:false"></table>
    </div>
</div>